/* eslint-disable */
<template>
  <div id="HomeView">
    <lbtAaa></lbtAaa>

    <div class="main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="特色产品" name="first">
          <div class="zs">
            <button @click="change1"><i class="el-icon-arrow-left"></i></button>
            <div class="zss">
              <div :class="it">
                <div class="box1" v-for="item in TSl">
                  <el-image
                    :src="'/api/'+ item.path"
                    :preview-src-list="['/api/'+ item.path]"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  <div class="box2">
                    <h4>{{ item.name }}</h4>
                    <h5>{{ item.price }}￥</h5>
                    <el-button type="danger" plain @click="to(item.id, item)"
                      >立即购买</el-button
                    >
                  </div>
                </div>
              </div>
            </div>

            <button @click="change2">
              <i class="el-icon-arrow-right"></i>
            </button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="热销产品" name="second">
          <div class="zs">
            <button @click="change1"><i class="el-icon-arrow-left"></i></button>
            <div class="zss">
              <div :class="it">
                <div class="box1" v-for="item in RXl">
                  <el-image :src="'/api/'+ item.path" alt=""
                  :preview-src-list="['/api/'+ item.path]"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  <div class="box2">
                    <h4>{{ item.name }}</h4>
                    <h5>{{ item.price }}￥</h5>
                    <el-button type="danger" plain @click="to(item.id, item)"
                      >立即购买</el-button
                    >
                  </div>
                </div>
              </div>
            </div>

            <button @click="change2">
              <i class="el-icon-arrow-right"></i>
            </button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="新产品" name="third">
          <div class="zs">
            <button @click="change1"><i class="el-icon-arrow-left"></i></button>
            <div class="zss">
              <div :class="it">
                <div class="box1" v-for="item in NEWl">
                  <el-image :src="'/api/' + item.path" alt=""
                  :preview-src-list="['/api/'+ item.path]"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  <div class="box2">
                    <h4>{{ item.name }}</h4>
                    <h5>{{ item.price }}￥</h5>
                    <el-button type="danger" plain @click="to(item.id, item)">
                      立即购买
                    </el-button>
                  </div>
                </div>
              </div>
            </div>

            <button @click="change2">
              <i class="el-icon-arrow-right"></i>
            </button>
          </div>
        </el-tab-pane>
      </el-tabs>

      <div class="gird">
        <div style="height: 200px">
          <div>
            <img src="../static//ttiglock.jpg" alt="" />
            <h1>升级你的武器</h1>
            <p>手枪，长枪，霰弹枪等</p>
            <el-button type="danger" @click="toAll">购买</el-button>
          </div>
        </div>
        <div style="height: 370px">
          <div>
            <img src="../static//home-action.jpg" alt="" />
            <h1>分享你的使用经历</h1>
            <p>看看你的</p>
            <a href="https://space.bilibili.com/">
              <el-button type="danger">查看</el-button>
            </a>
          </div>
        </div>
        <div style="height: 370px">
          <div>
            <img src="../static/boxes-tactical.jpg" alt="" />
            <h1>专业战术指导</h1>
            <p>观看专业人员的演示</p>
            <a href="https://www.bilibili.com/video/BV1h4411B7Y6/">
              <el-button type="danger">观看</el-button>
            </a>
          </div>
        </div>
        <div style="height: 200px">
          <div>
            <img src="../static//boxes-parts-accessories-3.jpg" alt="" />
            <h1>零件及配件</h1>
            <p>瞄具，握把，激光指示器等</p>
            <el-button type="danger" @click="toOther">购买</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import lbtAaa from "@/components/lbtAaa.vue";
import { getData } from "../util/getData";


//
export default {
  data() {
    return {
      activeName: "first",
      active: "",
      TSl: [],
      RXl: [],
      NEWl: [],
      it: "Left",
    };
  },
  components: {
    lbtAaa,
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      this.it = "Left";
      if (tab.index == 0) {
        //网络请求1
      } else if (tab.index == 1) {
        //网络请求2
      } else {
        //网络请求3
      }
    },
    change1() {
      this.it = "Left";
    },
    change2() {
      this.it = "Right";
    },
    toAll() {
      this.$router.push("/All");
    },
    toOther() {
      this.$router.push("/PJ");
    },
    to(gun, item) {
      this.$router.push({
        name: "gunDetail",
        params: { id: gun, gun: JSON.stringify(item) },
        props: true,
      });
    },
  },

  async created() {
    let res1 = await getData({ url: "/gunlist/findTS" });
    let res2 = await getData({ url: "/gunlist/findRX" });
    let res3 = await getData({ url: "/gunlist/findNEW" });
    this.TSl = res1.data;
    this.RXl = res2.data;
    this.NEWl = res3.data;
  },

};
</script>

<style  scoped>
.main {
  width: 1250px;
  padding-top: 70px;
  margin: 0 auto;
}

.Multi-line {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  line-clamp: 6;
  -webkit-line-clamp: 6;
  /* //显示几行 */
}
.tow-line {
  /* //超出两行省略号 */
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  /* 显示几行 */
}

.bg {
  background-repeat: no-repeat !important;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center;
}
::v-deep .el-tabs__item.is-active {
  color: #383e47;
  font-size: xx-large;
  font-weight: 1000;
}

::v-deep .el-tabs__item {
  font-size: xx-large;
  color: #757575;
}

::v-deep .el-tabs__active-bar {
  background-color: #b20000;
  bottom: -12px;
}

::v-deep .el-tabs__nav {
  margin-bottom: 12px;
}
/*               */

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-button--danger.is-plain {
  margin-top: 22px;
  width: 100%;
  color: #373e46;
  background: #fff;
  border-color: #373e46;
  transition: 0.2s;
}

.el-button--danger.is-plain:hover {
  color: #fff;
  background: #b20000;
  border-color: #b20000;
  transition: 0.2s;
}
/*                                                  */

.zs {
  widows: 1260px;
  height: 428px;
  margin: auto;
  display: flex;
}
.Left {
  width: 1800px;
  height: 428px;
  display: flex;
  transform: translate3d(0px, 0px, 0px);
  transition: 0.3s;
}

.Right {
  width: 1800px;
  height: 428px;
  display: flex;
  transform: translate3d(-600px, 0px, 0px);
  transition: 0.3s;
}

.box1 {
  width: 300px;
  height: 428px;
  padding: 0 15px;
}
.box1 > img {
  width: 270px;
  height: 270px;
  transition: 0.3s;
}
.box1 > img:hover {
  scale: 1.01;
  transition: 0.3s;
}
.zss {
  width: 1200px;
  height: 428px;
  overflow: hidden;
}

.zs > button {
  width: 30px;
  height: 30px;
  border: none;
  background-color: white;
  margin: auto;
}
.box2 > h4 {
  margin-top: 20px;
  color: #005599;
  font-weight: bolder;
}

/*       gird         */

.el-button--danger {
  color: #fff;
  background-color: #b20000;
  border-color: #b20000;
  transition: 0.2s;
}

.el-button--danger:hover {
  transition: 0.2s;
}
.gird {
  column-count: 2;
  /* 列数 */
  column-gap: 30px;
  /* 列间距 */
  column-width: 200px;
  /* 列宽 */
  width: 1200px;

  position: relative;

  margin: 100px auto 30px auto;
}

.gird > div {
  width: 585px;
  /* margin: 1%; */
  display: inline-block;
  /* 内联块元素 */
  margin-bottom: 20px;
  /* 底部间距 */
  border-radius: 5px;
  overflow: hidden;
}


.gird > div:nth-child(1) > div p {
  position: absolute;
  top: 60px;
  left: 3%;
  color: aliceblue;
}

.gird > div:nth-child(1) > div {
  height: 200px;
  width: 585px;
  transition: 0.3s;
}

.gird > div:nth-child(1) > div > img {
  width: 585px;
  height: 200px;
  transition: 0.3s;
}

.gird > div:nth-child(1) > div:hover > img {
  transition: 0.3s;
  transform: scale(1.2);
}

.gird > div:nth-child(1) > div > button {
  top: 21%;
  left: 35%;
  position: absolute;
  width: 120px;
  height: 42px;
}

.gird > div:nth-child(1) > div h1 {
  position: absolute;
  top: 3%;
  left: 3%;
  color: #fff;
  letter-spacing: 15px;
  font-weight: bolder;
  font-size: 2.5rem;
}

.gird > div:nth-child(1) > div p {
  position: absolute;
  top: 12%;
  left: 3%;
  color: #fff;
}

/*              */

.gird > div:nth-child(2) > div p {
  position: absolute;
  top: 60px;
  left: 3%;
  color: #fff;
}

.gird > div:nth-child(2) > div {
  height: 370px;
  width: 585px;
  transition: 0.3s;
  overflow: hidden;
}

.gird > div:nth-child(2) > div > img {
  width: 585px;
  height: 370px;
  transition: 0.3s;
}

.gird > div:nth-child(2) > div:hover > img {
  transition: 0.3s;
  transform: scale(1.2);
}

.gird > div:nth-child(2) > div > a > button {
  top: 85%;
  left: 35%;
  position: absolute;
  width: 120px;
  height: 42px;
}

.gird > div:nth-child(2) > div h1 {
  position: absolute;
  top: 40%;
  left: 3%;
  color: #fff;
  letter-spacing: 15px;
  font-weight: bolder;
  font-size: 2.5rem;
}

.gird > div:nth-child(2) > div p {
  position: absolute;
  top: 50%;
  left: 3%;
  color: #fff;
}

/*              */
.gird > div:nth-child(3) > div p {
  position: absolute;
  top: 60px;
  left: 3%;
  color: #fff;
}

.gird > div:nth-child(3) > div {
  height: 370px;
  width: 585px;
  transition: 0.3s;
  overflow: hidden;
}

.gird > div:nth-child(3) > div > img {
  width: 585px;
  height: 370px;
  transition: 0.3s;
}

.gird > div:nth-child(3) > div:hover > img {
  transition: 0.3s;
  transform: scale(1.2);
}

.gird > div:nth-child(3) > div > a > button {
  top: 49%;
  left: 86%;
  position: absolute;
  width: 120px;
  height: 42px;
}

.gird > div:nth-child(3) > div h1 {
  position: absolute;
  top: 3%;
  left: 55%;
  color: #fff;
  letter-spacing: 15px;
  font-weight: bolder;
  font-size: 2.5rem;
}

.gird > div:nth-child(3) > div p {
  position: absolute;
  top: 12%;
  left: 55%;
  color: #fff;
}

/*          */

.gird > div:nth-child(4) > div {
  height: 200px;
  width: 585px;
  transition: 0.3s;
  overflow: hidden;
}

.gird > div:nth-child(4) > div > img {
  width: 585px;
  height: 200px;
  transition: 0.3s;
}

.gird > div:nth-child(4) > div:hover > img {
  transition: 0.3s;
  transform: scale(1.2);
}

.gird > div:nth-child(4) > div > button {
  top: 85%;
  left: 86%;
  position: absolute;
  width: 120px;
  height: 42px;
}

.gird > div:nth-child(4) > div h1 {
  position: absolute;
  top: 68%;
  left: 55%;
  color: #fff;
  letter-spacing: 15px;
  font-weight: bolder;
  font-size: 2.5rem;
}

.gird > div:nth-child(4) > div p {
  position: absolute;
  top: 77%;
  left: 55%;
  color: #fff;
}


</style>